<template>
  <view class="admin-container">
    <!-- 顶部导航栏 -->
    <view class="header">
      <view class="header-content">
        <text class="title">管理后台</text>
        <view class="user-info">
          <text class="username">{{ userInfo?.name || '管理员' }}</text>
          <text class="role">{{ getRoleText(userInfo?.role?.[0]) }}</text>
          <button class="logout-btn" @click="handleLogout">退出</button>
        </view>
      </view>
    </view>

    <!-- 主要内容区域 -->
    <view class="main-content">
      <!-- 统计卡片 -->
      <view class="stats-section">
        <view class="stats-title">数据统计</view>
        <view class="stats-grid">
          <view class="stat-card" v-for="(stat, index) in statsData" :key="index">
            <view class="stat-number">{{ stat.value }}</view>
            <view class="stat-label">{{ stat.label }}</view>
          </view>
        </view>
      </view>

      <!-- 功能菜单 -->
      <view class="menu-section">
        <view class="menu-title">功能菜单</view>
        <view class="menu-grid">
          <view 
            class="menu-item" 
            v-for="(menu, index) in menuList" 
            :key="index"
            @click="handleMenuClick(menu)"
          >
            <view class="menu-icon">{{ menu.icon }}</view>
            <view class="menu-text">{{ menu.name }}</view>
          </view>
        </view>
      </view>

      <!-- 快速操作 -->
      <view class="quick-actions">
        <view class="actions-title">快速操作</view>
        <view class="action-buttons">
          <button 
            class="action-btn primary" 
            @click="handleQuickAction('viewReport')"
          >
            查看报道情况
          </button>
          <button 
            class="action-btn secondary" 
            @click="handleQuickAction('exportData')"
          >
            导出数据
          </button>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import platformGuard from '@/utils/platform-guard.js';

// 用户信息
const userInfo = ref(null);

// 统计数据
const statsData = ref([
  { label: '总学生数', value: '1200' },
  { label: '已报道', value: '980' },
  { label: '未报道', value: '220' },
  { label: '报道率', value: '81.7%' }
]);

// 菜单列表
const menuList = computed(() => {
  const role = userInfo.value?.role?.[0];
  
  const baseMenus = [
    { name: '数据统计', icon: '📊', action: 'statistics' },
    { name: '系统设置', icon: '⚙️', action: 'settings' }
  ];
  
  switch (role) {
    case 'counselor':
      return [
        { name: '专业管理', icon: '🎓', action: 'majorManage' },
        { name: '任务管理', icon: '📋', action: 'taskManage' },
        { name: '学生信息', icon: '👥', action: 'studentInfo' },
        ...baseMenus
      ];
    case 'faculty':
      return [
        { name: '学院管理', icon: '🏫', action: 'facultyManage' },
        { name: '专业统计', icon: '📈', action: 'majorStats' },
        { name: '辅导员管理', icon: '👨‍🏫', action: 'counselorManage' },
        ...baseMenus
      ];
    case 'office':
      return [
        { name: '全校统计', icon: '📊', action: 'schoolStats' },
        { name: '学生管理', icon: '👥', action: 'studentManage' },
        { name: '学院管理', icon: '🏫', action: 'facultyManage' },
        ...baseMenus
      ];
    default:
      return baseMenus;
  }
});

// 获取角色文本
const getRoleText = (role) => {
  const roleMap = {
    'counselor': '辅导员',
    'faculty': '学院管理员',
    'office': '学生处管理员'
  };
  return roleMap[role] || '管理员';
};

// 页面加载
onMounted(() => {
  // 检查平台权限
  if (platformGuard.platform !== 'web') {
    uni.showModal({
      title: '访问受限',
      content: '此页面仅支持Web端访问，请使用浏览器打开',
      showCancel: false,
      success: () => {
        // 小程序端跳转到学生首页
        if (platformGuard.platform === 'miniprogram') {
          platformGuard.reLaunch('/pages/dashboard/index');
        }
      }
    });
    return;
  }

  // 检查登录状态
  const token = uni.getStorageSync('token');
  if (!token) {
    uni.showModal({
      title: '提示',
      content: '请先登录',
      showCancel: false,
      success: () => {
        platformGuard.reLaunch('/pages/login/index');
      }
    });
    return;
  }

  // 获取用户信息
  userInfo.value = uni.getStorageSync('userInfo');
  
  if (!userInfo.value) {
    // 如果没有用户信息，创建一个默认的
    userInfo.value = {
      id: 1,
      account: 'admin',
      name: '管理员',
      role: ['counselor']
    };
    uni.setStorageSync('userInfo', userInfo.value);
  }
});

// 处理菜单点击
const handleMenuClick = (menu) => {
  uni.showToast({
    title: `点击了${menu.name}`,
    icon: 'none'
  });
  
  // 这里可以根据action跳转到对应页面
  switch (menu.action) {
    case 'majorManage':
      uni.showModal({
        title: '专业管理',
        content: '专业管理功能开发中...',
        showCancel: false
      });
      break;
    case 'taskManage':
      uni.showModal({
        title: '任务管理',
        content: '任务管理功能开发中...',
        showCancel: false
      });
      break;
    case 'studentInfo':
      uni.showModal({
        title: '学生信息',
        content: '学生信息功能开发中...',
        showCancel: false
      });
      break;
    default:
      uni.showModal({
        title: menu.name,
        content: `${menu.name}功能开发中...`,
        showCancel: false
      });
      break;
  }
};

// 处理快速操作
const handleQuickAction = (action) => {
  switch (action) {
    case 'viewReport':
      uni.showModal({
        title: '查看报道情况',
        content: '报道情况查看功能开发中...',
        showCancel: false
      });
      break;
    case 'exportData':
      uni.showModal({
        title: '导出数据',
        content: '数据导出功能开发中...',
        showCancel: false
      });
      break;
  }
};

// 处理退出登录
const handleLogout = () => {
  uni.showModal({
    title: '确认退出',
    content: '确定要退出登录吗？',
    success: (res) => {
      if (res.confirm) {
        // 清除登录信息
        uni.removeStorageSync('token');
        uni.removeStorageSync('userInfo');
        
        uni.showToast({
          title: '已退出登录',
          icon: 'success'
        });
        
        setTimeout(() => {
          platformGuard.reLaunch('/pages/login/index');
        }, 1500);
      }
    }
  });
};
</script>

<style scoped>
.admin-container {
  min-height: 100vh;
  background: #f5f5f5;
}

.header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  padding: 40rpx 0;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 40rpx;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 20rpx;
}

.username {
  font-size: 28rpx;
}

.role {
  font-size: 24rpx;
  opacity: 0.8;
}

.logout-btn {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  border: none;
  padding: 10rpx 20rpx;
  border-radius: 8rpx;
  font-size: 24rpx;
}

.main-content {
  padding: 40rpx;
}

.stats-section, .menu-section, .quick-actions {
  background: #fff;
  border-radius: 16rpx;
  padding: 40rpx;
  margin-bottom: 40rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.stats-title, .menu-title, .actions-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 30rpx;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30rpx;
}

.stat-card {
  text-align: center;
  padding: 30rpx;
  background: #f8f9fa;
  border-radius: 12rpx;
}

.stat-number {
  font-size: 48rpx;
  font-weight: bold;
  color: #667eea;
  margin-bottom: 10rpx;
}

.stat-label {
  font-size: 24rpx;
  color: #666;
}

.menu-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30rpx;
}

.menu-item {
  text-align: center;
  padding: 30rpx;
  background: #f8f9fa;
  border-radius: 12rpx;
  cursor: pointer;
  transition: all 0.3s;
}

.menu-item:hover {
  background: #e9ecef;
  transform: translateY(-2rpx);
}

.menu-icon {
  font-size: 48rpx;
  margin-bottom: 20rpx;
}

.menu-text {
  font-size: 28rpx;
  color: #333;
}

.action-buttons {
  display: flex;
  gap: 30rpx;
}

.action-btn {
  flex: 1;
  height: 80rpx;
  border: none;
  border-radius: 12rpx;
  font-size: 28rpx;
  font-weight: bold;
}

.action-btn.primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
}

.action-btn.secondary {
  background: #f8f9fa;
  color: #333;
  border: 2rpx solid #e0e0e0;
}
</style> 